<style>
    .out{
        background-color: #fff;
        border: 1px solid #888;
        width:99%;
        color:#444;
    }
</style>
<div class='title'>对话框</div>

<div class="sub">
<div class='text'>
    dialog 可以使用 xs s m l xl full 类名来使用不同尺寸的对话框，默认为m
</div>
<div class='text'>JUI.dialog 中有以下以下几个方法：</div>
<div class="list">
    <div>1.isOpen():判断当前是否有打开的对话框</div>
    <div>2.clear():关闭所有的对话框</div>
    <div>3.removeAll():删除所有的对话框</div>
</div>
<div class='text'>请看一个例子：</div>
<div class='text'>
    <div class="out">
        <button jon='this.dshow=!this.dshow'>弹出对话框</button>
        <button jon='isOpen'>是否有打开的对话框</button>
        <button jon='clear'>关闭所有对话框</button>
        <button jon='this.dshow2=!this.dshow2'>不能移动和没有关闭按钮的对话框</button>
        <div class='j-dialog' dialog-title='对话框' jui-bind='dshow'>
            <input class='j-input' type="text">
            <button class="j-btn">确认</button>
        </div> 
        <div class='j-dialog' dialog-title='对话框2' jui-bind='dshow2' dialog-drag='false' dialog-close='false'>
            <input class='j-input' type="text">
            <button class="j-btn">确认</button>
            <button class="j-btn" jon='this.dshow2=!this.dshow2'>关闭</button>
        </div> 
    </div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;button jon='this.dshow=!this.dshow'>弹出对话框&lt;/button>
&lt;button jon='isOpen'>是否有打开的对话框&lt;/button>
&lt;button jon='clear'>关闭所有对话框&lt;/button>
&lt;button jon='this.dshow2=!this.dshow2'>不能移动和没有关闭按钮的对话框&lt;/button>
&lt;div class='j-dialog' dialog-title='对话框' jui-bind='dshow'>
    &lt;input class='j-input' type="text">
    &lt;button class="j-btn">确认&lt;/button>
&lt;/div> 
&lt;div class='j-dialog' dialog-title='对话框2' jui-bind='dshow2' dialog-drag='false' dialog-close='false'>
    &lt;input class='j-input' type="text">
    &lt;button class="j-btn">确认&lt;/button>
    &lt;button class="j-btn" jon='this.dshow2=!this.dshow2'>关闭&lt;/button>
&lt;/div> 
&lt;script>
    new Jet({
        data:{
            dshow:false,
            dshow2:false
        },func:{
            isOpen:function(){
                JUI.msg(JUI.dialog.isOpen());
            },clear:function(){
                JUI.dialog.clear();
            }
        }
    });
&lt;/script>
    </div>
</div>
<div class='text'>当dialog打开时，若其尺寸或位置发生了改变，可以使用dialog元素提供的reinitPos方法来将其重新放置在屏幕正中间。dialog元素可以通过绑定的DOM元素的$jui属性获得。</div>

<script>
    new Jet({
        data:{
            dshow:false,
            dshow2:false
        },func:{
            isOpen:function(){
                JUI.msg(JUI.dialog.isOpen());
            },clear:function(){
                JUI.dialog.clear();
            }
        }
    });
</script>